<template>
	<view class="content">
      <!--  <swiper class="swiper" circular indicator-active-color="#277CC0" :indicator-dots="indicatorDots"
            :autoplay="autoplay" :interval="interval" :duration="duration">
            <swiper-item v-for="(i,n) in imgList" :key="n">
               <image :src="i" mode=""></image>
            </swiper-item>
        </swiper> -->
      <!--  <view class="swiper" >
            <image v-if="detail.img_url" :src="$domain.api+detail.img_url" mode=""></image>
        </view> -->
        <view class="plr16 ">
            <view class="bgWhite radius8 plr15 ptb15 justify-between align-center mt12 info" >
                <image :src="$domain.api+detail.img_url" mode=""></image>
                <view class="flex1 flex-col justify-around" style="height: 180rpx;">
                        <view class="name ft16">{{detail.name}}</view>
                        <text class="address ft12 ">中国广东省深圳市福田区红荔西路7022-6号</text>
                </view>
            </view>
           
             <view class="moduleTitle">场次信息 </view>
             <view class="bgWhite radius6 plr15 ptb15 mb20 mt15 justify-between align-center ">
                  <view class="timeBox" >
                     {{timeInfo.open_date }}  {{week[timeInfo.week_name-1] }}  {{timeInfo.start_time}} - {{timeInfo.end_time}}
                  </view>
                   <view class="timeBox" >
                        ￥{{timeInfo.pay_fee }}
                  </view>
             </view>   
			 <view class="moduleTitle">优惠 </view>
			 <view class="bgWhite radius6 plr15 ptb15 mb20 mt15   ">
			     <view class="timeBox justify-between align-center" >
			      <view class="">商品金额</view>    <text>￥{{timeInfo.pay_fee}}</text>
			     </view>
			     <view class="timeBox justify-between align-center mt5" >
			      <view class="">优惠券</view>   <view class=" align-center" @click="showchosePop">  {{ couponPrice}} <uv-icon name="arrow-right"></uv-icon>      </view>
			     </view>
			 </view>   
			 
              <view class="moduleTitle">联系人信息 </view>
              <view class="bgWhite radius6 plr15 ptb15 mb20 mt15  ">
                   <view class="timeBox justify-between align-center" >
                    <view class=""><text style="color: #FF9012;margin-right: 8rpx;">*</text>联系人</view>    <text>{{form.people}}</text>
                   </view>
                   <view class="timeBox justify-between align-center mt5" >
                    <view class=""><text style="color: #FF9012;margin-right: 8rpx;">*</text>联系方式</view>    <text>{{form.phone}}</text>
                   </view>
                   
              </view>      
        
        </view>
        <view class=" bgWhite paybtn">
            <view class="" style="color: #979797;font-size: 28rpx;line-height: 56rpx;margin-bottom: 18rpx;">
               点击确认按钮预约即视为已阅读并同意《预约须知》 
            </view>
            <view class="justify-between align-center">
                <view class="freebtn"> 
                合计： <text>￥</text><text style="font-size: 72rpx;">{{timeInfo.pay_fee }}</text> <text>元</text>
                </view>
                <view @click="pay" class="onlinePay">提交订单</view>
            </view>
          
            
        </view>
		<uv-popup ref="choseCoupon" mode="bottom" >
			<view class="">
				<view class="moduleTitle ft16 " style="text-align: center;">
					优惠券选择
				</view>
				<view class="artItem bgWhite   mlr15 mb15 justify-between align-center" v-for="(i,n) in couponList" :key="n" :class="coupon_id==item.id?'couponFocus':''">
				        
				    <view class="flex-col  left align-center justify-center mr20 ">
				        <view class="name"><text style="font-size: 32rpx;"> ￥</text> {{i.min_amount}}</view>
				        <text class="desc">满{{i.max_amount}}元可用</text>
				    </view>
				    
				    <view class="service " @click="userCoupon(i)">
				        {{i.id==coupon_id? '取消使用' :'使用'}}    
				    </view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
                
				list: [],
				chain: false,
				value: 0,
                indicatorDots: true,
                autoplay: true,
                interval: 3000,
                duration: 500,
                imgList:[],
                id:"",
                detail:{},
                current:0,
                timeInfo:{},
                week:['周一','周二','周三','周四','周五','周六','周日'],
                openid:"",
				form:{},
				couponPrice:"请选择",
				userInfo:uni.getStorageSync('userInfo'),
				couponList:[],
				coupon_id:'',
				orderno:""
			}
		},
		
		onLoad(opt) {
               if(opt.orderno) this.orderno = opt.orderno
			   this.getDetail()
                // this.$refs.choseCoupon.open()
		},
		methods: {
				
			getDetail(){
				this.$api.genCode({orderno:this.orderno}).then(res=>{
					console.log(res)
				})
				
			},
				showchosePop(){
					this.$refs.choseCoupon.open()
				},
				userCoupon(item){
					if(item.id==this.coupon_id){
							this.coupon_id=0
							this.couponPrice='请选择' 
						
					}else{
						this.coupon_id=item.id
						this.couponPrice='减'+item.min_amount+'元'
					}
				
					this.$refs.choseCoupon.close()
					
					
				},	
			async getMain() {
                const {data,code}  =   await this.$api.venueDetail({id:this.id })
                if(code==200){
                    this.detail = data
                }
			},
            async getTime() {
                const {data,code}  =    await this.$api.venueOpenTime({venueId:this.id})
                if(code==200){
                    console.log(data)
                    this.timeInfo = data[this.current]
                    
                }
            },
			async getCoupon(){
					const data =await this.$api.usedCoupon({user_id:this.userInfo.id,pay_amount:this.timeInfo.pay_fee}) 
					console.log(data)
					// this.yyData = data.data
			},
			async getOrderStatus(orderno){
				const data =await this.$api.checkOrder({out_trade_no:orderno})
				if(data.code==200){
					uni.navigateTo({
						url:'/pages/orderDetail/index?id='+orderno
					})
				}
				
			},
            async pay(){
				let vm =this
				let form = {
						"venue_id":this.form.venue_id,
					    "venue_time_id": this.form.venue_time_id,
					    "user_id":this.userInfo.id,
					    "openid":this.userInfo.openid,
					    "appointer_id": this.form.appointer_id,
					    "pay_fee": 0.01,
					    "coupon_id":0
				}
              this.$api.pay(form).then(res=>{
                  console.log(res)
				  
                  uni.requestPayment({
                  	provider: "wxpay",
                  	appId: res.config.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
                  	nonceStr: res.config?.nonceStr, // 随机字符串
                  	package: res.config.package, // 固定值
                  	// "partnerid": res.data.appId,      // 微信支付商户号
                  	// "prepayid": res.data.appId,  // 统一下单订单号
                  	signType: 'MD5',
                  	timeStamp: res.config?.timeStamp || String(Date.now()), // 时间戳（单位：秒）
                  	paySign: res.config.paySign, // 签名，这里用的 MD5/RSA 签名
                  	success(data) {
						console.log(data)
						vm.getOrderStatus(res.out_trade_no)
                  		uni.showToast({
                  			title: '支付成功',
                  			icon: "none"
                  		})
                  	},
                  	fail(e) {
                  		uni.showToast({
                  			title: '支付失败',
                  			icon: "error"
                  		})
                  		console.log(e)
                  	}
                  
                  })
              })
                
                
            }
		}
	}
</script>
<style scoped lang="scss">
	.header {
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}
	
    .notice{
        padding: 26rpx 48rpx;
        background: #FCF3EE;
        border: 2rpx solid #F3D6C6;
        font-size: 28rpx;
        color: #F3915B;
        image{
            margin-left: 86rpx;
            width: 60rpx;
        }
    }
    .paybtn{
        
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 30rpx;
        background-color: #fff;
        .onlinePay{
            width: 324rpx;
            height: 92rpx;
            background: #FFFFFF;
            border-radius: 12rpx ;
            border: 2rpx solid #2CC6A1;
            font-size: 32rpx;
            color: #2CC6A1;
            line-height: 92rpx;
            background: #2CC6A1;
            color: #fff;
            text-align: center;
        }
            
        .freebtn{
            text{
                color: #FF9012;
            }
        }
      
    }
    .moduleTitle{
        font-weight: 600;
        color: #000000;
        line-height: 54rpx;
        font-size: 32rpx;
        margin: 30rpx 0 10rpx;
    }
        
    .swiper{
        image{
            width: 100%;
            height: 300rpx;
        }
    }
    .info{
        image{
            width: 240rpx;
            height: 180rpx;
            border-radius: 12rpx 12rpx 12rpx 12rpx;
            margin-right: 38rpx;
        }
        .name{
            color: #3D3D3D;
            font-weight: 500;
        }
            
        .address{
            color: #9F9F9F;
        }
    }
    .timeBox{
        color: #3D3D3D;
    }
	.artItem {
	    box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.0612);
	    font-size: 24rpx;
	    border-radius: 16rpx 16rpx 16rpx 16rpx;
	    margin-bottom: 36rpx;
	        font-size: 24rpx;
	        color: #666666;
	    .left{
	        width: 224rpx;
	        height: 180rpx;
	        background: #FFF2F2;
	        border-radius: 12rpx 12rpx 12rpx 12rpx;
	    }
	    .desc{
	       font-weight: 600;
	       font-size: 32rpx;
	       color: #E6220A; 
	    }
	    .name{
	   font-weight: 600;
	   font-size: 64rpx;
	   color: #E6220A;
	    }
	}
	.service{
	    width: 140rpx;
	    height: 66rpx;
	    background: #E6220A;
	    color: #fff;
	    text-align: center;
	    font-size: 32rpx;
	    line-height: 66rpx;
	    border-radius: 60rpx 60rpx 60rpx 60rpx;
	    margin-right: 20rpx;
	}
</style>